import React, { useEffect, useState } from 'react'
import http from '../../utils/http'
import styles from './index.module.css'
import { useNavigate } from 'react-router-dom'
import { BellOutline } from 'antd-mobile-icons'
import { List, SearchBar, Tabs, Tag } from 'antd-mobile'
function Index() {
  const navigate = useNavigate()
  const [list, setList] = useState([])
  const getList = async () => {
    const res = await http.get('/api/list')

    console.log(res);

    const { code, data } = res.data

    if (code === 200) {
      setList(data)
    }

  }

  useEffect(() => {
    getList()
  }, [])

  const handleList = () => {
    navigate(`/list`)
  }
  return (
    <div>
      <div className={styles.top_wroe}>
        <div>
          <List>
            <List.Item title='您的位置'>杭州市，浙江省</List.Item>
          </List>
        </div>
        <span>
          <BellOutline onClick={()=>navigate('/message')} className={styles.icon_wroe} />
          <p className={styles.yuan}></p>
        </span>
      </div>
      <div className={styles.search_wroe}>
        <SearchBar placeholder='搜索' />
      </div>
      <div>
        <Tabs>
          <Tabs.Tab title='全部' key='1'>
            <div>
              <div className={styles.center_wroe}>
                <h2>即将开展</h2>
                <span onClick={() => handleList()}>查看所有</span>
              </div>
              <div className={styles.center_wroe1}>
                {
                  list?.map((item, ind) => (
                    <div key={ind} className={styles.box1_wroe}>
                      <div className={styles.bottom_wroe}>
                        <img src={item.image} alt="" style={{ width: '300px', height: '300px' }} />
                        <div className={styles.bottom_data}>
                          <h3>{item.title}</h3>
                          <div className={styles.text_wroe}>
                            <span>杭州市</span>
                            <span>{item.date}</span>
                            <span><Tag color='warning'>￥{item.price}</Tag></span>
                          </div>
                        </div>
                      </div>
                    </div>
                  ))
                }
              </div>
            </div>
          </Tabs.Tab>
          <Tabs.Tab title='音乐会' key='2'>
            音乐会
          </Tabs.Tab>
          <Tabs.Tab title='研讨会' key='3'>
            研讨会
          </Tabs.Tab>
          <Tabs.Tab title='剧院' key='4'>
            剧院
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  )
}

export default Index
